import { useEffect } from "react";
import {Image, StyleSheet, View, Text, ImageBackground, TouchableOpacity} from 'react-native';
import { scaleSize } from "@/utils/screenSize"
import activityIcon from "@/assets/images/me/pocket/activity_icon.png"
import about_icon from "@/assets/images/me/pocket/about_icon.png"
import chat_icon from "@/assets/images/me/pocket/chat_icon.png"
import collection_icon from "@/assets/images/me/pocket/collection_icon.png"
import money_icon from "@/assets/images/me/pocket/money_icon.png"
import order_icon from "@/assets/images/me/pocket/order_icon.png"
import task_icon from "@/assets/images/me/pocket/task_icon.png"
import { useRouter } from "expo-router";


export default function PocketScreen() {
    const router = useRouter();

    const goConcern = () => {
        router.push("/concern")
    };

    const goCollection = () => {
        router.push("/collection");
    };

    const goOrder = () => {
        router.push("/order");
    };

    const goAbout = () => {
        router.push("/setting/about");
    };

    const goMoney = () => {
        router.push('/money')
    };

    const goActivity = () => {
        router.push("/activity")
    };

    const goGourpState = () => {
        router.push("/groupStatus")
    };


    return (
        <View style={styles.pocketWrap}>
            <View style={styles.pocketContainer}>
                <TouchableOpacity onPress={goActivity}>
                    <View style={styles.pocketItem}>
                        <ImageBackground style={styles.pocketItemIcon} source={activityIcon}>
                            <View>
                            </View>
                        </ImageBackground>
                        <Text style={ styles.pocketItemText }>我的活动</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={goGourpState}>
                    <View style={styles.pocketItem}>
                        <ImageBackground style={styles.pocketItemIcon} source={chat_icon}>
                            <View>
                            </View>
                        </ImageBackground>
                        <Text style={ styles.pocketItemText }>我的社群</Text>
                    </View>
                </TouchableOpacity>
               <TouchableOpacity>
                   <View style={styles.pocketItem}>
                       <ImageBackground style={styles.pocketItemIcon} source={task_icon}>
                           <View>
                           </View>
                       </ImageBackground>

                       <Text style={ styles.pocketItemText }>我的任务</Text>
                   </View>
               </TouchableOpacity>
                <TouchableOpacity onPress={goMoney}>
                    <View style={styles.pocketItem}>
                        <ImageBackground style={styles.pocketItemIcon} source={money_icon}>
                            <View>
                            </View>
                        </ImageBackground>

                        <Text style={ styles.pocketItemText }>我的钱包</Text>
                    </View>
                </TouchableOpacity>
            </View>
            <View style={[styles.pocketContainer,styles.pocketContainer2]}>
                <TouchableOpacity onPress={goConcern}>
                    <View style={styles.pocketItem}>
                        <ImageBackground style={styles.pocketItemIcon} source={collection_icon}>
                            <View>
                            </View>
                        </ImageBackground>
                        <Text style={ styles.pocketItemText }>我的关注</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={goCollection}>
                    <View style={styles.pocketItem}>
                        <ImageBackground style={styles.pocketItemIcon} source={activityIcon}>
                            <View>
                            </View>
                        </ImageBackground>
                        <Text style={ styles.pocketItemText }>我的收藏</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={goOrder}>
                    <View style={styles.pocketItem}>
                        <ImageBackground style={styles.pocketItemIcon} source={order_icon}>
                            <View>
                            </View>
                        </ImageBackground>

                        <Text style={ styles.pocketItemText }>我的订单</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={goAbout}>
                    <View style={styles.pocketItem}>
                        <ImageBackground style={styles.pocketItemIcon} source={about_icon}>
                            <View>
                            </View>
                        </ImageBackground>

                        <Text style={ styles.pocketItemText }>关于我们</Text>
                    </View>
                </TouchableOpacity>
            </View>
        </View>

    );
}

const styles = StyleSheet.create({
    pocketContainer: {
        flexDirection: "row",
        justifyContent: "space-around",
        paddingLeft: 12,
        paddingRight: 12,
    },
    pocketContainer2: {
        marginTop: 5,
    },
    pocketWrap: {

    },
    pocketItem: {
        width: scaleSize(85),
        height: scaleSize(60),
        // margin: "auto"
    },
    pocketItemIcon: {
        width: scaleSize(24),
        height: scaleSize(24),
        margin: "auto",
        marginBottom: 0,
        // backgroundColor: "red",
    },
    pocketItemText: {
        textAlign: "center",
        fontSize: 12,
        marginTop: 4,
    },
});
